<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-按钮点击事件绑定展示</title>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
    <h1>当前数量为：<span>{{counter}}</span></h1>
    <button v-on:click="add">增加</button>&nbsp;<button v-on:click="sub">减少</button>
</div>
<script src="../js/vue.global.js" />
<script>Vue.config.productionTip = false</script>
<script>
   Vue.createApp({
      data(){
          return{
              message:`Hello ,VUE！`,
              counter:0,
          }
      },
       methods:{
            add(){
                console.log(this.counter);
                this.counter++;
            },
           sub(){
               console.log(this.counter);
                this.counter--;
           }
       }
   }).mount("#app");
</script>
</body>
</html>